import React, { useState, useRef, useEffect } from 'react';
import { Divider, Image, InputNumber, Menu, Dropdown, Row, Col } from "antd";
import styles from "./index.less";
import { connect, history } from 'umi';
import imgUrl from "@/assets/contactbac.jpg";
import imgUrl1 from "@/assets/pingtu1.png";
import { ArrowRightOutlined, ArrowLeftOutlined, DownOutlined } from '@ant-design/icons';
import SectionTitle from '@/components/SectionTitle';
const imgArr = [
    {
        url: require("@/assets/bgkj.jpg"),
        id: 1
    },
    {
        url: imgUrl1,
        id: 2
    },
    {
        url: imgUrl,
        id: 3
    },
    {
        url: require("@/assets/bg.png"),
        id: 4
    },
    {
        url: require("@/assets/banner.png"),
        id: 5
    },
    {
        url: require("@/assets/logo_simple.png"),
        id: 6
    },
    {
        url: require("@/assets/vip.png"),
        id: 7
    },
    {
        url: require("@/assets/contact.jpg"),
        id: 8
    }
],
    priceArr = [
        {
            num: "3000 ~ 4000",
            price: "￥ 10,000.00",
            id: 1
        },
        {
            num: "1~9",
            price: "￥ 10,000.00",
            id: 2
        },
        {
            num: "1~9",
            price: "￥ 10,000.00",
            id: 3
        },
        {
            num: "1~9",
            price: "￥ 10,000.00",
            id: 4
        },
        {
            num: "1~9",
            price: "￥ 10,000.00",
            id: 5
        },

    ],
    tel = "15357885455",
    pho = "05132269535",
    parameter = [
        {
            label: "适用年龄",
            value: "14周岁以上"
        },

        {
            label: "比例",
            value: "其他"
        },
        {
            label: "热门系列",
            value: "pvc系列"
        },
        {
            label: "颜色分类",
            value: "测试测试测试测试测晒黑啥都奥"
        },
        {
            label: "出售状态",
            value: "预售"
        }
    ],
    col = { xs: 8, sm: 8, md: 8, lg: 8 }


const ProductDetail = (props) => {
    const [maxUrl, cm] = useState(imgArr[0].url),
        [currentIndexs, ci] = useState(0),
        [left, clf] = useState(0),
        [contact, ct] = useState({
            telephnoe: "",
            photo: ""
        });
    useEffect(() => {
        ct({
            telephnoe: tel.slice(0, 4) + "****" + tel.slice(tel.length - 4, tel.length),
            photo: pho.slice(0, 4) + "****" + pho.slice(pho.length - 4, pho.length)
        })
    }, []);
    const prev = () => {
        let currentIndex = currentIndexs,
            prevIndex = currentIndex - 1,
            allIndex = imgArr && imgArr.length ? Math.floor(imgArr?.length / 5) : 0,
            remainder = imgArr?.length % 5 || 0;
        if (currentIndex == 0) {
            return;
        }
        if (allIndex == currentIndex && remainder > 0) {
            clf(left => {
                return left + (remainder * 77)
            })
        } else {
            clf(left => {
                return left + 385
            })
        }
        ci(prevIndex)
    };
    const next = () => {
        let currentIndex = currentIndexs,
            nextIndex = currentIndex + 1,
            allIndex = imgArr && imgArr.length ? Math.floor(imgArr?.length / 5) : 0,
            remainder = imgArr?.length % 5 || 0;
        if (remainder > 0) {
            if (nextIndex > allIndex) {
                return;
            }
        } else if (nextIndex == allIndex) {
            return;
        }
        if (nextIndex == allIndex && remainder > 0) {
            clf(left => {
                return left - (remainder * 77)
            })
        } else {
            clf(left => {
                return left - 385
            })
        }
        ci(nextIndex)
    };
    const menu = (
        <Menu>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                    1st menu item
                </a>
            </Menu.Item>
        </Menu>
    );


    return (
        <div className={`${styles.productDetail} content`}>
            <div className={styles.productIntro}>
                <div className={styles.pi_lf}>
                    <div className={styles.lf_t} style={{ background: `url(${maxUrl}) no-repeat center` }}>
                        <Image src={maxUrl} width={418} height={418} style={{ opacity: 0 }}></Image>
                    </div>
                    <div className={styles.lf_b}>
                        <div style={{ width: 24, textAlign: "left", position: "absolute", left: 0 }}>
                            <ArrowLeftOutlined className="hoverable" onClick={() => {
                                prev()
                            }} />
                        </div>
                        <div style={{ height: "100%", position: "absolute", left: 24, right: 24, width: 370, overflow: "hidden" }} >
                            <div style={{ position: "absolute", left: left, transition: "all 1s", overflow: "hidden", width: 9999 }}>
                                {
                                    imgArr.map(it => {
                                        return <div key={it.id}
                                            className={maxUrl == it.url ? [styles.hoverStyle, styles.imgBox].join(" ") : styles.imgBox}
                                            onMouseEnter={() => {
                                                cm(it.url)
                                            }}>
                                            <div key={it.id} style={{ width: "100%", height: "100%", background: `url(${it.url}) no-repeat center`, backgroundSize: "cover" }}>
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                        <div style={{ width: 24, textAlign: "right", position: "absolute", right: 0 }}>
                            <ArrowRightOutlined className="hoverable" onClick={() => {
                                next()
                            }} />
                        </div>
                    </div>
                </div>
                <div className={styles.pi_lr}>
                    <div className="oneline" style={{ width: "100%", color: '#6d6d6d' }} title={"芭藜造者九分裤女夏季薄款高腰哈伦裤运动裤2021新款韩版宽松大码弹力松紧腰显高显瘦休闲裤 黑色 L（105-115斤左右）"}>芭藜造者九分裤女夏季薄款高腰哈伦裤运动裤2021新款韩版宽松大码弹力松紧腰显高显瘦休闲裤 黑色 L（105-115斤左右）</div>
                    <Divider style={{ margin: "20px 0" }} />
                    <div className={styles.lr_price}>
                        <div className={styles.price_lf}>
                            <div className={styles.num}>订货量</div>
                            {
                                priceArr?.map(it => it?.num)?.map((item, i) => {
                                    return <div className={styles.num} key={i}>{item}</div>
                                })
                            }
                        </div>
                        <div className={styles.price_lr}>
                            <div style={{ color: "#ff5a26" }}>价格</div>
                            {
                                priceArr?.map(it => it?.price)?.map((item, i) => {
                                    return <div className={styles.price} key={i}>{item}</div>
                                })
                            }
                        </div>
                    </div>
                    <Divider style={{ margin: "20px 0" }} />
                    <div className={styles.lr_stock}>
                        <div>
                            <p>
                                <span className={styles.labelColor}>供货总量：</span>
                                <span>10000 台</span>
                            </p>
                            <p>
                                <span className={styles.labelColor}>是否现货：</span>
                                <span>是</span>
                            </p>
                            <p>
                                <span className={styles.labelColor}>购买数量：</span>
                                <InputNumber />
                            </p>
                        </div>
                        <div style={{ textAlign: "right" }}>
                            <p>
                                <span className={styles.labelColor}>产地：</span>
                                <span>江苏省（省市）</span>
                            </p>
                            <p>
                                <span className={styles.labelColor}>发货期：</span>
                                <span>自买家付款之日起10天内发货</span>
                            </p>
                        </div>
                    </div>
                    <Divider style={{ margin: "20px 0" }} />
                    <div className={`${styles.lr_contract} spacebt`}>
                        <div>
                            <span style={{ color: "#b0b0b0" }}>联系方式：</span>
                            <span>张先生</span>
                        </div>
                        <div style={{ display: "flex", justifyContent: "space-between", width: "40%" }}>
                            <div>{contact.telephnoe}</div>
                            <div>{contact.photo}</div>
                        </div>
                        <a style={{ fontSize: 14 }} onClick={() => {
                            ct({
                                telephnoe: tel,
                                photo: pho
                            })
                        }}>查看号码</a>
                    </div>
                </div>
            </div>
            <div style={{ marginTop: 20 }}>
                <SectionTitle
                    extra={
                        <Dropdown overlay={menu}>
                            <a className="ant-dropdown-link" onClick={e => e.preventDefault()} style={{ fontSize: 14 }}>附件下载</a>
                        </Dropdown>
                    }
                    size="large"
                >
                    产品详情
                </SectionTitle>
            </div>
            <div className={styles.particulars}>
                <div className={styles.h_title}>参数说明</div>
                <Row>
                    {
                        parameter.map((it, i) => {
                            return <Col {...col} key={i}>
                                <p>
                                    <span>{it.label}：</span>
                                    <span >{it.value}</span>
                                </p>
                            </Col>
                        })
                    }
                </Row>
                <div className={styles.h_title}>详细介绍</div>
                <img style={{width:"100%"}} src={require("@/assets/pingtu1.png")} alt=""/>
            </div>
        </div>
    )
}
export default ProductDetail;